<template>
	<view class="container">
		<!-- 产品图片 -->
		<view class="product-image">
			<image :src="productData.img" mode="widthFix" class="image"></image>
		</view>

		<!-- 产品详细信息 -->
		<view class="product-info">
			<view class="title-price-button" style="display: flex">
				<text class="name">{{ productData.productName }}</text>
				<text class="price">￥{{ productData.price }}</text>
				<button type="warn" @click="addToCart" style="height: 30px; font-size: 10px; position: relative; right: -55px">加入购物车</button>
			</view>
			<view class="pro-des" style="margin-top: 10px; display: flex">
				<text class="content" style="font-weight: bold">
					产地：
					<uni-tag :text="productData.location" type="success" :inverted="true" />
				</text>
				<view class="content">
					<text style="font-weight: bold">花语：</text>
					<text style="color: #ff557f">{{ productData.description }}</text>
				</view>
			</view>
		</view>

		<!-- 产品评论信息 -->
		<view class="comments">
			<view class="comment-title">
				<text>用户评论</text>
			</view>
			<view class="comment-list" v-if="comments.length != 0">
				<view class="comment-item" v-for="(comment, index) in comments" :key="index">
					<uni-icons type="sound-filled" size="25"></uni-icons>
					<text class="comment-user">{{ comment.username }}</text>
					<text class="comment-content">: {{ comment.content }}</text>
					<text class="time">{{ comment.createdAt }}</text>
				</view>
			</view>
			<view v-else style="padding: 20px auto; text-align: center">
				<text style="color: gray; font-size: 20px">暂无评论</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			productData: {
				productId: null,
				productName: null,
				location: null,
				price: null,
				stock: null,
				description: null,
				createdAt: null,
				updatedAt: null,
				img: null
			}, 
			comments: [] 
		};
	},
	// 页面加载时获取数据
	onLoad(options) {
		console.log(options.productData);
		const product = JSON.parse(decodeURIComponent(options.productData));
		console.log(product);
		this.productData = product;
		this.fetchComments();
	},
	methods: {
		// 获取评论信息
		fetchComments() {
			uni.request({
				method: 'GET',
				url: `http://localhost:8080/review/getReviewsByProductId?productId=${this.productData.productId}`,
				success: (res) => {
					if (res.data.status === 200) {
						this.comments = res.data.data; 
						console.log(this.comments);
					} else {
						console.log("请求失败");
					}
				},
				fail: (error) => {
					console.error('请求失败', error);
				}
			});
		},
		// 加入购物车
		addToCart() {
			if (this.productData.stock === 0) {
				uni.showToast({
					title: '已经没有库存啦！！！',
					icon: 'none'
				});
				return;
			} else {
				this.productData.stock = this.productData.stock - 1;
			}
			console.log(this.productData);
			uni.request({//发送请求到购物车
				method: 'POST',
				url: `http://localhost:8080/car/addCar`,
				data: this.productData,
				success: (res) => {
					if (res.data.status === 200) {
						uni.showToast({
							title: '加入购物车成功！',
							icon: 'none'
						});
					} else {
						console.log("加入购物车失败");
					}
				},
				fail: (error) => {
					console.error('请求失败', error);
				}
			});
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
}

.product-image .image {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 10px;
}

.product-info {
	margin-top: 20px;
	padding: 10px 0;
}

.product-info .name {
	font-size: 24px;
	font-weight: bold;
	margin-right: 20rpx;
}

.product-info .price {
	font-size: 20px;
	color: red;
}

.product-info .content {
	font-size: 16px;
	margin-right: 30px;
}

.comments {
	margin-top: 10px;
}

.comments .comment-title text {
	font-size: 20px;
	font-weight: bold;
}

.comments .comment-item {
	margin-top: 10px;
	padding: 10px;
	background-color: #f0f0f0;
	border-radius: 5px;
}

.comments .comment-user {
	font-weight: bold;
}

.add-to-cart {
	position: fixed;
	right: 20px;
	bottom: 20px;
}

.add-to-cart button {
	padding: 5px;
	background-color: #ff6700;
	color: white;
	border: none;
	border-radius: 5px;
}
.time {
	text-align: left;
}
</style>
